<template>
  <view class="content">
    <view class="title">子组件B</view>
    <view class="b-box">
      CompA组件传进来的值:
      <text class="intent-text-box">{{ fromA }}</text>
    </view>
    <view class="b-box" style="margin: 10rpx;">
      <text>回传值:</text>
      <input type="text" v-model="callbackValue" style="color: yellow;" />
      <button @click="sendoutside()" size="mini">回传</button>
    </view>
  </view>
</template>

<script>
export default {
  name: "ComB",
  props: ['fromA'], 
  data() {
    return {
      callbackValue: '' 
    };
  },
  methods: {
    sendoutside() {
      console.warn("---CompB---sendOutside---" + this.callbackValue);
      this.$emit('callBackFun', this.callbackValue);
    }
  }
}
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #34cd72;
  padding: 30rpx;
  border-radius: 12rpx;
}
.title {
  font-size: 50rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}
.b-box {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  width: 100%;
}
.b-box text {
  margin-right: 10rpx;
  font-size: 32rpx;
}
.intent-text-box {
  margin-right: 10rpx;
  font-size: 32rpx;
}
input {
  border: 1rpx solid #ccc;
  padding: 10rpx;
  border-radius: 8rpx;
  margin-right: 10rpx;
  flex: 1;
}
</style>